<template>
    <div class="login-box">
        <div class="content">
            <van-form>
                <van-cell-group inset>
                    <van-field
                        v-model="phone"
                        name="手机号"
                        placeholder="请输入手机号"
                        autocomplete="off"
                        :rules="[{ required: true, message: '请输入手机号' }]">
                        </van-field>
                        <span class="code" @click="getCode">{{ codeMsg }}</span>
                    <van-field
                        v-model="code"
                        type="text"
                        name="验证码"
                        autocomplete="off"
                        placeholder="请输入验证码"
                        :rules="[{ required: true, message: '请输入验证码' }]"/>
                </van-cell-group>
                <div class="checks">
                    <van-checkbox v-model="remmeber" checked-color="#178c00" icon-size=".85rem">记住我？</van-checkbox>
                    <van-checkbox v-model="autoLog" checked-color="#178c00" icon-size=".85rem">免登录？</van-checkbox>
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="primary" 
                        native-type="submit" 
                        color="linear-gradient(to right, #bcff00, #33d900)"
                        :disabled="!canLogin"
                        :loading="loading"
                        @click="loginEvt"
                    >
                    登录
                    </van-button>
                </div>
            </van-form>
            <van-checkbox v-model="agree" checked-color="#178c00" icon-size=".85rem">同意<span @click="router.push('/agree')">《顽客用户协议》</span></van-checkbox>
            <div class="reg-box">
                <span class="reg" @click="router.push('/register')">注册</span>
            </div>
            <div class="other">
                <p>第三方登录</p>
                <div>
                    <span class="iconfont icon-logo-qq qq"></span>
                    <span class="iconfont icon-logo-wechat"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { showToast } from "vant";
import { computed, ComputedRef, onMounted, ref, Ref } from "vue";
import { Router, useRouter } from "vue-router";
import { getCodeApi, loginApi } from "../../apis/userApis";
import { deCodeApi, enCodeApi, validatePhone } from "../../utils";
import { useCommonStore } from "../../store";
import { AUTO_CACHE_KEY, REMEMBER_CACHE_KEY } from "../../config/common.cfg";
// import { getShowListApi } from "../../apis/userApis";

const router:Router = useRouter()

const phone:Ref<any> = ref()
const code:Ref<any> = ref()
const agree:Ref<boolean> = ref(false)
const remmeber:Ref<boolean> = ref(false)
const autoLog:Ref<boolean> = ref(false)

// 初始化组件时判断是否有缓存
onMounted(function(){
    let _cache = localStorage.getItem(REMEMBER_CACHE_KEY)
    if(_cache){
        phone.value = parseInt(deCodeApi(_cache))
        remmeber.value = true
    }
})

// 按钮是否可用
const canLogin: ComputedRef<boolean> = computed(() => {
    return phone.value && validatePhone(phone.value) && /^[0-9]{4}$/.test(code.value) && agree.value == true
})
// 获取验证码
const codeMsg: Ref<string> = ref('获取验证码')
async function getCode(){
    if(!validatePhone(phone.value)){
        showToast({message:'请输入正确的手机号！',position:"middle"})
        return
    }
    setTimeout(function(){
        console.log(Date.now());
        
    })
    if(codeMsg.value !== '获取验证码') return
    codeMsg.value = '获取中'
    let _res = await getCodeApi(phone.value)
    if(_res.code == 200){
        codeMsg.value = '重新获取(60s)'
        showToast({message:'验证码'+_res.data.code,position:"middle"})
        loopTimer(Date.now())
    }else{
        codeMsg.value = '获取验证码'
        showToast('获取验证码失败，请重试')
    }
    
}

// 倒计时
function loopTimer(_st:number){
    let _time = 60 - Math.ceil((Date.now() - _st) / 1000)
    if(_time > 0){
        codeMsg.value = `重新获取(${_time}s)`
        setTimeout(function(){
            loopTimer(_st)
        },100)
    }else{
        codeMsg.value = '获取验证码'
    }
}

// 登录方法
const loading:Ref<boolean> = ref(false)
const store = useCommonStore()
async function loginEvt() {
    loading.value = true;
    let _res= await loginApi(phone.value,code.value)
    console.log(_res);
    
    if(_res.code !== 200){
        showToast('登陆失败，'+_res.message)
        loading.value = false
        return
    }
    // 缓存用户信息
    store.token = _res.data.token
    store.userInfo = _res.data
    
    // 是否记住我的缓存处理
    if(remmeber.value){
        localStorage.setItem(REMEMBER_CACHE_KEY,enCodeApi(phone.value))
    }else{
        localStorage.removeItem(REMEMBER_CACHE_KEY)
    }
    // 是否免登录
    if(autoLog.value){
        // 缓存并加密处理
        localStorage.setItem(AUTO_CACHE_KEY,enCodeApi(_res.data.token))
    }else{
        localStorage.removeItem(AUTO_CACHE_KEY)
    }

    showToast('登录成功')
    router.push('/home')
}



</script>

<style lang="less" scoped>
@import url('../../style/comon.less') ;
.login-box{
    width: 100%;
    height: 100%;
    background:#e0f980 url(../../../public/img/loginBg.png) no-repeat;
    background-size: 100% ;
    overflow: hidden;
    
}
.content{
    overflow-x: hidden;
    width: 96vw;
    min-height: 48%;
    padding: .5rem 0;
    position: absolute;
    left: calc(50% - 48vw);
    bottom: .5rem;
    background-color: whitesmoke;
    border-radius: .6rem;
    box-shadow: 0 0 10px #aeabab ;
    .van-cell-group{
        background: transparent;
        position: relative;
        .van-cell{
            font-size: .8rem;
            border-bottom: 2px solid rgb(236, 236, 236);
            background: transparent;
            line-height: 1.5rem;
            margin-bottom: .5rem;
        }
        .code{
            font-size: .75rem;
            border-left: 2px solid rgb(236, 236, 236);
            padding-left: .5rem;
            position: absolute;
            top: .8rem;
            right: 2px;
            color: @g9;
        }
    }
    .van-button--round{
        font-size: .8rem;
        letter-spacing: .4rem;
        color: whitesmoke;
    }
    .checks{
        display: flex;
        justify-content: space-between;
    }
    .van-checkbox{
        margin: .6rem .8rem;
        font-size: .7rem;
        span{
            color: @g9;
        }
    }
    .reg-box{
        margin: 0 1rem;
        height: 1rem;
        font-size: .7rem;
        color: #c7c7c7;
        .forg{
            float: left;
        }
        .reg{
            float: right;
            color: @g9;
        }
    }
    .other{
        margin: 0 .8rem;
        margin-top: 2rem;
        p{
            text-align: center;
            font-size: .8rem;
            color: #a0a0a0;
        }
        div{
            text-align: center;
            line-height: 2.4rem;
            span{
                display: inline-block;
                width: 1.6rem;
                height: 1.6rem;
                line-height: 1.6rem;
                text-align: center;
                border-radius: 50%;
                border: 1px solid #cccccc;
                font-size: 1rem !important;
                color: @g9;
                margin: .6rem ;
            }
            .qq{
                color: #66ade6;
            }
        }
    }
}
::v-deep .van-field__control{
    width: 70%;
}


</style>